import React from 'react';
import { connect } from 'dva';
import './index.less';
import Modal from '../../components/Sideslip/Sideslip';
import { Message,Card, Button, Input, message, Select } from 'antd';
import {getDistributeP} from '../../services/api';

const Option = Select.Option;

class DistributeModal extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            value:this.props.serviceP,
            phone:'',
            id:'',
            loading:false,
        }
    }


    closeModal = () => {
        this.setState({
            phone:'',
            id:'',
        },()=>{
            this.props.operateModal();
        }) 
        
    }

    cancel = () => {
        this.closeModal();
       
    }
   
    
    async check(val){
        await this.setState({
            id:val
        })
        for(let i = 0; i < this.props.serviceP.length; i++){
            if(this.state.id === this.props.serviceP[i].fId){
               this.setState({
                   phone:this.props.serviceP[i].fPhone
               })
            }
        }
   }
   
   //分配角色
   async DistributeP(){
       this.setState({loading:true})
       const ids = this.props.selectedRowKeys;
    //    if(this.state.id === ''){
    //        message.info('请选择服务人员');
    //        this.setState({loading:false})
    //        return;
    //    }
       const response = await getDistributeP({fElderlyId:ids,fId:this.state.id});
       console.log('response',response)
       if(response.code === 200){      
          this.cancel();
          this.props.getInfo();
          this.setState({
            phone:'' ,
            loading:false,
            id:''
          })
          Message.success('分配成功')
       } else { 
           this.setState({loading:false})
        //    response.msg && message.error( response.msg );
       }
      
   }
    render() {
        return (
            <Modal visable={this.props.visable} closeModal={this.closeModal} infoArr={this.props.infoArr}>
                <div className="warps">
                  <p>分配人员</p>  
                  <Card style={{width:'95%',marginLeft:25}}>
                    <ul className="content_">
                       
                        <li> 
                            <span className="name">服务人员：</span>
                            {
                                <Select onChange={(value)=>this.check(value)} style={{width:'236px'}} placeholder="请选择..."> 
								{
									this.props.serviceP.map((item)=>{
										return(
											<Option value={item.fId} key={item.fId}>{item.fName}({item.fPhone})</Option>
										)
									})
								}
  								</Select>
                            }
                        </li>
                        <li> 
                            <span className="name">人员电话：</span>
                            <Input className="inp" value={this.state.phone} disabled />
                        </li>
                    </ul> 
                  </Card>
                  <div className="btn_group">
                    <p>
                      <Button className="btn_del" onClick={this.cancel}>取消</Button>
                      <Button className="btn_ok" style={{backgroundColor:'#63A4F4',color:'white'}} onClick={()=>this.DistributeP()} loading={this.state.loading}>确定</Button>
                    </p>                 
                  </div>
                </div>
            </Modal>
        );
    }
}
export default connect()(DistributeModal);
